// Copyright 2015 Quuppa Oy. All rights reserved.
var Q = Q || {};
var flag = false;
var x = 0; // 鼠标开始移动的位置X
var y = 0; // 鼠标开始移动的位置Y
var url = ''; // canvas图片的二进制格式转为dataURL格式
var ctx = null;
var cvs = null;
var cvsClientRect = null;
var points = [];
var flag = false;

var canvasRect = null;
//矩形框的左上角坐标
var canvasLeft=null;
var canvasTop=null;
var layer=0;
var layerIndex=layer;
var layerName="layer";
var x=0;
var y=0;
Q.Map2DInteractionManager = function(map, selectionManager) {
	// this.map = map;
	// isLeftMouseButtonDown = false;
	leftMouseDownPos = undefined; // [0, 0];
	touchStartPos = undefined;
	 cvs = document.getElementById("mapCanvas");
	 cvsClientRect = cvs.getClientRects()[0];
	 ctx = cvs.getContext('2d');
	 points = [];
	 flag = false;
	canvasRect = cvs.getBoundingClientRect();
	canvasLeft=canvasRect.left;
	canvasTop=canvasRect.top;

	var cvs = document.getElementById("mapCanvas");
	var cvsClientRect = cvs.getClientRects()[0];
	var ctx = cvs.getContext('2d');
	var points = [];
	var flag = false;
// var l
};
// window.onload = function(){
// 	$('#mapCanvas').mousedown(function(e){
// 		flag = true;
// 		x = e.offsetX; // 鼠标落下时的X
// 		y = e.offsetY; // 鼠标落下时的Y
// 	}).mouseup(function(e){
// 		flag = false;
// 		url = $('#mapCanvas')[0].toDataURL(); // 每次 mouseup 都保存一次画布状态
// 		loadImage();
// 	}).mousemove(function(e){
// 		drawRect(e); // 绘制方法
// 	});
// }

//1、	画笔工具
function drawPencil(e){
	if(flag){
		ctx.lineTo(e.offsetX,e.offsetY);
		ctx.stroke(); // 调用绘制方法
	}else{
		ctx.beginPath();
		ctx.moveTo(x,y);
	}
}
//画矩形

function drawRect(e){
	if(flag){
		// ctx.clearRect(0,0,$('#mapCanvas')[0].width,$('#mapCanvas')[0].height);
		ctx.beginPath();
		// ctx.globalCompositeOperation="source-over"
		ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y);
	}
}
//画直线
function drawLine(e){
	if(flag){
		ctx.clearRect(0,0,$('#mapCanvas')[0].width,$('#mapCanvas')[0].height);
		ctx.beginPath();
		ctx.moveTo(x,y);
		ctx.lineTo(e.offsetX,e.offsetY);
		ctx.stroke();
	}
}
//画圆circle
function drawCircle(e){
	if(flag){
		ctx.clearRect(0,0,canvas.width,canvas.height);
		ctx.beginPath();
		var rx = (e.offsetX-x)/2;
		var ry = (e.offsetY-y)/2;
		var r = Math.sqrt(rx*rx+ry*ry);
		ctx.arc(rx+x,ry+y,r,0,Math.PI*2); // 第5个参数默认是false-顺时针
		ctx.stroke();
	}
}
function loadImage(){
	var img = new Image();
	img.src = url;
	ctx.drawImage(img,0,0,$('#mapCanvas')[0].width,$('#mapCanvas')[0].height);
}



this.mousedownHandler = function(event){
	if(event.button == 0 && !flag) {
		points.push({
			x: event.pageX - cvsClientRect.x,
			y: event.pageY - cvsClientRect.y
		});
		console.log(points)
		if(points.length>=1) {
			cvs.addEventListener("mousemove", mousemoveHandler, false);
		}
		drawPolygon(points);
	}
}

//鼠标双击
this.mousedbclick = function(event)
{
	flag = true;
	cvs.removeEventListener("mousemove", mousemoveHandler);
}
function drawPolygon(points) {
	cvs = document.getElementById("mapCanvas");
	ctx = cvs.getContext('2d');
	ctx.clearRect(0,0,cvs.width,cvs.height);

	ctx.strokeStyle = '#000';
	ctx.beginPath();
	ctx.moveTo(points[0].x,points[0].y);
	for(var i=1;i<points.length;i++) {
		ctx.lineTo(points[i].x,points[i].y);
	}
	ctx.closePath();
	ctx.stroke();
}
this.mousemoveHandler = function(event) {
	drawPolygon(points.concat({
		x: event.pageX - cvsClientRect.x,
		y: event.pageY - cvsClientRect.y
	}));
}
$("#btn_add").click(function(){
	flag = false;
	cvs.addEventListener("mousedown", mousedownHandler, false);
	cvs.addEventListener("dblclick", mousedbclick, false);
});
function test1(){
	cvs = document.getElementById("mapCanvas");
	cvsClientRect = cvs.getClientRects()[0];
	ctx = cvs.getContext('2d');
	points = [];
	flag = false;
	cvs.addEventListener("mousedown", mousedownHandler, false);
	cvs.addEventListener("dblclick", mousedbclick, false);
	// drawPen();
	/* 为canvas绑定mouse事件 */





}
// layer=0;
// CanvasExt = {
// 	drawRect:function(penColor,strokeWidth){
// 		var that=this;
// 		canvasId ="mapCanvas";
// 		that.penColor=penColor;
// 		that.penWidth=strokeWidth;
//
// 		var canvas=cvs;
// 		//canvas 的矩形框
// 		var canvasRect = canvas.getBoundingClientRect();
// 		//矩形框的左上角坐标
// 		var canvasLeft=canvasRect.left;
// 		var canvasTop=canvasRect.top;
//
// 		var layerIndex=layer;
// 		var layerName="layer";
// 		var x=0;
// 		var y=0;
//
// 		//鼠标点击按下事件，画图准备
// 		canvas.onmousedown=function(e){
// 			ctx.save();
// 			ctx.beginPath();
// 			//设置画笔颜色和宽度
// 			var color=that.penColor;
// 			var penWidth=that.penWidth;
//
// 			layerIndex++;
// 			layer++;
// 			layerName+=layerIndex;
// 			x = e.clientX-canvasLeft;
// 			y = e.clientY-canvasTop;
//
// 			$("#"+canvasId).addLayer({
// 				type: 'rectangle',
// 				strokeStyle: color,
// 				strokeWidth: penWidth,
// 				name:layerName,
// 				fromCenter: false,
// 				x: x, y: y,
// 				width: 1,
// 				height: 1
// 			});
//
// 			$("#"+canvasId).drawLayers();
// 			$("#"+canvasId).saveCanvas();
// 			//鼠标移动事件，画图
// 			canvas.onmousemove=function(e){
//
// 				width = e.clientX-canvasLeft-x;
// 				height = e.clientY-canvasTop-y;
//
// 				$("#"+canvasId).removeLayer(layerName);
//
// 				$("#"+canvasId).addLayer({
// 					type: 'rectangle',
// 					strokeStyle: color,
// 					strokeWidth: penWidth,
// 					name:layerName,
// 					fromCenter: false,
// 					x: x, y: y,
// 					width: width,
// 					height: height
// 				});
//
// 				$("#"+canvasId).drawLayers();
// 			}
// 		};
//
// 		canvas.onmouseup=function(e){
//
// 			var color=that.penColor;
// 			var penWidth=that.penWidth;
//
// 			canvas.onmousemove=null;
//
// 			width = e.clientX-canvasLeft-x;
// 			height = e.clientY-canvasTop-y;
//
// 			$("#"+canvasId).removeLayer(layerName);
//
// 			$("#"+canvasId).addLayer({
// 				type: 'rectangle',
// 				strokeStyle: color,
// 				strokeWidth: penWidth,
// 				name:layerName,
// 				fromCenter: false,
// 				x: x, y: y,
// 				width: width,
// 				height: height
// 			});
//
// 			$("#"+canvasId).drawLayers();
// 			$("#"+canvasId).saveCanvas();
// 		}
// 	}
// };
// function drawPen(){
// 	var color = "red";
// 	var width = 1;
// 	CanvasExt.drawRect(color,width);
// }
